<template>
  <span v-loading="loading">
    <img class="td__image" :src="row[col.prop]" @load="loading = false">
  </span>
</template>

<script>
export default {
  name: 'TdImage',
  components: {},
  props: {
    col: {
      type: Object,
      default: () => {}
    },
    row: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: true
    }
  },
  watch: {
    row: {
      handler(newVal, oldVal) {
        if (newVal[this.col.prop] !== oldVal[this.col.prop]) {
          this.loading = true
        }
      },
      deep: true
    }

  },
  methods: {

  }
}
</script>

<style lang='scss' scoped>
.td__image {
  width: 120px;
  vertical-align: middle;
}
</style>
